<section class="text-center pd-20">
    <div class="row">
        <div class="col s12 m12 l12">
            <div class="ev-card-body pd-20 w-300">
                <form name="editChallengePhaseForm"
                    ng-submit="challenge.editChallengePhase(editChallengePhaseForm.$valid)">
                    <div class="row">
                        <div class="col s6 m6 l6">
                            <div class="input-field align-left">
                                <span class="fs-16 w-400 text-med-black">Title</label>
                                    <input type="text" id="title" name="title"
                                        ng-model="challenge.page.challenge_phase.name"
                                        value="{{challenge.page.challenge_phase.name}}"
                                        focus-if="challenge.page.challenge_phase.name" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12 m12 l12">
                            <div class="fs-16 w-400 text-med-black">Description</div>
                            <div class="input-field align-left">
                                <trix-editor class="editor" ng-model-options="{ updateOn: 'blur' }" spellcheck="false"
                                    class="trix-content" ng-model="challenge.page.challenge_phase.description"
                                    angular-trix trix-initialize="trixInitialize(e, editor);"
                                    trix-change="trixChange(e, editor);"
                                    trix-selection-change="trixSelectionChange(e, editor);"
                                    trix-focus="trixFocus(e, editor);" trix-blur="trixBlur(e, editor);"
                                    trix-file-accept="trixFileAccept(e, editor);"
                                    trix-attachment-add="trixAttachmentAdd(e, editor);"
                                    trix-attachment-remove="trixAttachmentRemove(e, editor);"
                                    prevent-trix-file-accept="true" placeholder="Challenge Phase Description">
                                </trix-editor>
                                <code>Hint: To use MathJax in editor, use $$ $$</code> 
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12 m3 l3">
                            <div class="input-field align-left">
                                <span class="text-med-black w-400 fs-16">Start date and time</span>
                                <input id="start_date" name="start_date" format="MM-DD-YYYY hh:mm a" locale="en"
                                    value="{{challenge.phaseStartDate}}" ng-model="challenge.phaseStartDate"
                                    start-view="year" ng-model-options="{ updateOn: 'blur' }" placeholder="Start date"
                                    moment-picker="challenge.phaseStartDate" start-date="challenge.phaseStartDate"
                                    required>
                                <span class="form-icon"><i class="fa fa-text"></i></span>
                            </div>
                        </div>
                        <div class="col s12 m3 l3">
                            <div class="input-field align-left">
                                <span class="text-med-black w-400 fs-16">End date and time</span>
                                <input id="end_date" name="end_date" format="MM-DD-YYYY hh:mm a" locale="en"
                                    value="{{challenge.phaseEndDate}}" ng-model="challenge.phaseEndDate"
                                    start-view="year" ng-model-options="{ updateOn: 'blur' }" placeholder="End date"
                                    moment-picker="challenge.phaseEndDate" min-date="challenge.phaseStartDate" required>
                                <span class="form-icon"><i class="fa fa-text"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="row"></div>
                    <div class="col s12 m4 l3">
                        <div class="input-field align-left">
                            <span class="text-med-black w-400 fs-16">Submissions/day</span>
                            <input type="number" step="1" min="0" id="max_submissions_per_day"
                                name="max_submissions_per_day"
                                ng-model="challenge.page.challenge_phase.max_submissions_per_day"
                                value="{{challenge.page.challenge_phase.max_submissions_per_day}}" required>
                            <span class="form-icon"><i class="fa fa-text"></i></span>
                        </div>
                    </div>
                    <div class="col s12 m4 l3">
                        <div class="input-field align-left">
                            <span class="text-med-black w-400 fs-16">Submissions/month</span>
                            <input type="number" step="1" min="challenge.page.challenge_phase.max_submissions_per_day"
                                id="max_submissions" name="max_submissions"
                                ng-model="challenge.page.challenge_phase.max_submissions_per_month"
                                value="{{challenge.page.challenge_phase.max_submissions_per_month}}" required>
                            <span class="form-icon"><i class="fa fa-text"></i></span>
                        </div>
                    </div>
                    <div class="col s12 m4 l3">
                        <div class="input-field align-left">
                            <span class="text-med-black w-400 fs-16">Total submissions</span>
                            <input type="number" step="1" min="challenge.page.challenge_phase.max_submissions_per_month"
                                id="max_submissions" name="max_submissions"
                                ng-model="challenge.page.challenge_phase.max_submissions"
                                value="{{challenge.page.challenge_phase.max_submissions}}" required>
                            <span class="form-icon"><i class="fa fa-text"></i></span>
                        </div>
                    </div>
                    <div class="col s12 m4 l3">
                        <div class="input-field align-left">
                            <span class="text-med-black w-400 fs-16">Max Concurrent Submissions Allowed</span>
                            <input type="number" step="1" min="0" id="max_concurrent_submissions_allowed"
                                name="max_concurrent_submissions_allowed"
                                ng-model="challenge.page.challenge_phase.max_concurrent_submissions_allowed"
                                value="{{challenge.page.challenge_phase.max_concurrent_submissions_allowed}}" required>
                            <span class="form-icon"><i class="fa fa-text"></i></span>
                        </div>
                    </div>
            <div class="row">
                <div class="col s12 m6 l6">
                    <div class="file-field input-field">
                        <div class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-transparent fs-16">
                            <span> File </span>
                            <input name="challenge.testAnnotationFile" ngf-select type="file"
                                class="text-dark-black dark-autofill w-50" ng-model="challenge.testAnnotationFile">
                        </div>
                        <div class="file-path-wrapper">
                            <input class="file-path" type="text" class="input-field"
                                ng-model="challenge.testAnnotationFile" ng-value="challenge.testAnnotationFile.name">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col s12 m6 l6">
                    <div class="input-field align-left text-med-black w-400"
                        ng-if="challenge.testAnnotationFile.name.length">
                        <span class="fs-16 text-med-black">
                            <div class="pass-title" ng-init="challenge.sanityCheckPass=false">Please enter the
                                challenge
                                phase name i.e <span class="orange-text">{{challenge.page.challenge_phase.name}}</span>
                                to update
                                the
                                test
                                annotation file.</div>
                        </span>
                        <input type="text" id="challenge.sanityCheck" ng-model="challenge.sanityCheck">
                        <div
                            ng-if="(!(challenge.sanityCheck == challenge.page.challenge_phase.name) && (challenge.sanityCheck!=''))">
                            <span class="wrn-msg text-highlight">Phase name doesn't match!</span>
                        </div>
                        <div ng-if="challenge.sanityCheck == challenge.page.challenge_phase.name">
                            <div ng-init="challenge.sanityCheckPass=true">
                                <span>You may proceed.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col s12 m12">
                    <div class="align-left text-med-black w-400">
                        <ul class="inline-list hide-on-med-and-down">
                            <li>
                                <a ng-click="challenge.editChallengePhase(false)"
                                    class="dark-link pointer"><strong>Cancel</strong></a>
                            </li>
                            <li>
                                <button class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-16"
                                    type="submit" value="submit"
                                    ng-disabled="!challenge.sanityCheckPass">Submit</button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>
    </div>
</section>